<template>
  <div>
    <HelloWorld :msg="count" ref="childRef" v-model.trim.uppercase="active" v-model:visible="state.editFormVisible" />
    {{ active }} ------{{ state.editFormVisible }}
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'HelloWorld'
})
import { ref, reactive } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";

const count = ref(88);
const active = ref('nih');
const childRef = ref(null);
const state = reactive({
  editFormVisible: 2222,
});
const callChildMethod = () => {
  state.editFormVisible++;
  if (childRef.value) {
    childRef.value.change2(); // 调用子组件的方法
    console.log("Child count:", childRef.value.rGreet.name.value); // 访问子组件的数据
  }
};
</script>
